<template>
	<u-popup v-model="visible" @close="$popupClose" mode="bottom" safe-area-inset-bottom>
		<view>
			<view class="cell_item">
				<view class="su_color iconfont iconfont-e730"></view>
				<view class="txt">文案已复制至剪切板</view>
			</view>
			<view class="cell_item">
				<view class="su_color iconfont iconfont-e730"></view>
				<view class="txt">图片已保存至相册</view>
			</view>
			<view class="cell_item">
				<view class="share">
					分享朋友圈
				</view>
			</view>
			<view class="cell_item">
				<view class="txt">
					1.打开微信 2.粘贴文案/上传图片3.发布朋友圈
				</view>
			</view>
			<view class="btn_box">
				<view class="btn" @click="visible = false">确认</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				visible: false
			}
		},
		watch: {
			value(val) {
				if (val) {
					this.visible = true
				}
			}
		},
		mounted() {},
		methods: {
			$popupClose() {
				this.$emit('input', false)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.cell_item {
		border-bottom: 2rpx solid #E0E0E0;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.su_color {
			color: #FF9E45;
		}

		.iconfont {
			margin-right: 14rpx;
		}

		.share {
			color: #FF9E45;
			position: relative;

			&::after {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				width: 198rpx;
				right: -220rpx;
				height: 2rpx;
				background-color: #FF9E45;
			}

			&::before {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				width: 198rpx;
				left: -220rpx;
				height: 2rpx;
				background-color: #FF9E45;
			}
		}
	}

	.btn_box {
		padding: 64rpx 40rpx 8rpx;

		.btn {
			border-radius: 6rpx;
			background-color: #F8F8F8;
			line-height: 94rpx;
			text-align: center;
		}
	}
</style>
